<template>
  <div class="tree-box">
    <MForm :fields="fields" @submit="search" @cancel="search"> </MForm>
    <div class="btns">
      <div class="btns-left">
        <el-button type="primary" @click="add(0)"> 新增 </el-button>
        <div style="margin: 0 10px">
          <MDeleteButton
            @click="setInstitutionDel(selectKeys)"
            :selectKeys="selectKeys"
          ></MDeleteButton>
        </div>
        <MImportData
          :http="sorgImport"
          :options="[
            {
              label: '民非',
              value: 0
            },
            {
              label: '社团',
              value: 1
            }
          ]"
          optionLabel="type"
          @reload="reload"
          style="margin-right: 10px"
        ></MImportData>
        <!--<el-button> 批量导入 </el-button>-->
        <el-button @click="download"> 模板下载 </el-button>
        <el-button @click="generateLedgers">
          <template #icon>
            <img
              src="@/assets/imgs/spotCheck/icon/c2.svg"
              alt="icon"
              class="btn-icon"
            />
          </template>
          生成台账
        </el-button>
      </div>
      <div class="search">
        <!--<el-input-->
        <!--  v-model="params.search"-->
        <!--  placeholder="请输入"-->
        <!--  @input="searchName"-->
        <!--  :suffix-icon="Search"-->
        <!--/>-->
      </div>
    </div>
    <MTable
      :columns="columns"
      :http="pageSorg"
      :params="params"
      v-model:isReload="isReload"
      v-model:selectKeys="selectKeys"
      displayFormat="list"
      rowKey="sorgInfoId"
    >
      <template #状态="{ row }">
        <div class="status">
          <span class="status-error" v-if="row.logout === 4">拟注销</span>
          <span class="status-error" v-if="row.logout === 3">拟撤销</span>
          <span class="status-error" v-if="row.logout === 2">已撤销</span>
          <span class="status-error" v-if="row.logout === 1">已注销</span>
          <span class="status-success" v-if="row.logout === 0">在册</span>
        </div>
      </template>
      <template #actions="{ row }">
        <div style="display: flex; align-items: center">
          <MSvgIconTooltip
            name="edit"
            content="编辑"
            @click="add(row.sorgInfoId)"
          ></MSvgIconTooltip>
          <el-dropdown>
            <!--<MSvgIconTooltip-->
            <!--  name="more"-->
            <!--  content="更多"-->
            <!--&gt;</MSvgIconTooltip>-->
            <div style="cursor: pointer; outline: unset !important">
              <img src="@/assets/svg/more.svg" alt="" />
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <!--<el-dropdown-item>-->
                <!--  <MA @click="change(row.sorgInfoId, row.state)">-->
                <!--    停用/恢复-->
                <!--  </MA>-->
                <!--</el-dropdown-item>-->
                <el-dropdown-item>
                  <MA @click="setActOrBlack(row.sorgInfoId, 1)">
                    加入失信社会组织黑名单
                  </MA>
                </el-dropdown-item>
                <el-dropdown-item>
                  <MA @click="setActOrBlack(row.sorgInfoId, 2)">
                    加入活动异常名单
                  </MA>
                </el-dropdown-item>
                <el-dropdown-item>
                  <MA @click="setInstitutionDel([row.sorgInfoId])"> 删除 </MA>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </MTable>
    <MFormDialog
      v-model="formDialog.visible"
      v-bind="formDialog"
      :fields="dialogFields"
      :httpAdd="httpAdd"
      :httpEdit="httpEdit"
      :httpGet="httpGet"
      :handler="handler"
      @reload="reload"
    ></MFormDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
import { columns, dialogFields, fields } from './config'
import { Search } from '@element-plus/icons-vue'
import {
  addOrUpd,
  editOrUpd,
  detailSorg,
  pageSorg,
  stateSorg,
  sorgImport,
  downloadExcelTemplateSorg,
  sorgDel,
  sorgActOrBlack,
  sorgLedger
} from '@/api/systemSetting/socialOrganization'
import { newDeptTreeInfoAll } from '@/api/systemSetting/personnel'
import { ElMessage } from 'element-plus'
defineOptions({
  name: 'logManagement'
})

const treeList = ref(new Map())
onMounted(() => {
  newDeptTreeInfoAll().then((res) => {
    dialogFields.find((i) => i.label === '业务主管部门').attrs.data = res.data
    setTreeList(res.data)
    console.log('dialogFields', dialogFields)
  })
})

const setTreeList = (arr) => {
  if (Array.isArray(arr) && arr.length > 0) {
    arr.forEach((i) => {
      let children = []
      treeList.value.set(i.deptId, { ...i, children })
      if (Array.isArray(i.children) && i.children.length > 0) {
        setTreeList(i.children)
      }
    })
  }
}

const setActOrBlack = (id, type) => {
  let data = {}
  if (type === 1) {
    data = {
      isDishonesty: 1,
      sorgInfoId: id
    }
  } else {
    data = {
      isActivityException: 1,
      sorgInfoId: id
    }
  }
  sorgActOrBlack(data).then((res) => {
    reload()
  })
}

const httpAdd = async (e) => {
  let data = {
    ...e,
    competentDept: treeList.value.get(e.competentDeptId).deptName
  }
  return await addOrUpd(data)
}

const httpEdit = async (id, d) => {
  let data = {
    ...d,
    competentDept: treeList.value.get(d.competentDeptId).deptName
  }
  return await editOrUpd(id, data)
}

const httpGet = async (id) => {
  const res = await detailSorg(id)
  console.log('res', res)
  return {
    data: {
      ...res.data
    }
  }
}
// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

const searchName = (e) => {
  reload()
}
// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

//批量删除
const setInstitutionDel = (e) => {
  sorgDel({ sorgInfoId: e }).then((res) => {
    ElMessage.success('删除成功！')
    reload()
  })
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

const formDialog = ref({
  visible: false,
  id: 0
})

function handler(data: any) {
  console.log('handler', data)
  //data.parentId = parentId.value
  return data
}

function add(id: number) {
  formDialog.value.visible = true
  formDialog.value.id = id
}

const change = (sorgInfoId, state) => {
  stateSorg({ sorgInfoId, state: state === 0 ? 1 : 0 }).then((res) => {
    reload()
  })
}

//下载模板
const download = () => {
  downloadExcelTemplateSorg().then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '模板.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
  })
}

//生成台账
const generateLedgers = () => {
  sorgLedger({ ...params.value, sorgInfoId: selectKeys.value.join(',') }).then(
    (res) => {
      const blob = new Blob([res], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      })
      const a = document.createElement('a')
      const URL = window.URL || window.webkitURL
      const herf = URL.createObjectURL(blob)
      a.href = herf
      a.download = '台账.xlsx'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(herf)
    }
  )
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  .nodeBox {
    width: 100%;
    height: 80vh;
    overflow-x: auto;
    cursor: all-scroll;
  }
  .showLevel {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.dialog-row {
  width: 100%;
  .dialog-col {
    width: 100%;
    display: flex;
    .dialog-col-serialNumber {
      color: #333;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      font-weight: bold;
      margin-right: 20px;
    }
    .dialog-col-rig {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(237, 237, 237, 1);
      margin-bottom: 20px;
      padding-bottom: 20px;
      .dialog-col-rig-content {
        .dialog-col-rig-content-title {
          font-size: 13px;
          color: #666;
          margin-bottom: 20px;
        }
        .dialog-col-rig-content-form {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
.btns {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .btns-left {
    display: flex;
  }
}

.status {
  & > span {
    display: flex;
    align-items: center;
  }

  &-success::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background-color: #52c41b;
  }
  &-error::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background-color: #e4393c;
  }
}
</style>
